
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el与data的两种写法</title>
    <script src=".././vue.js/vue.js"></script>
</head>

<body>
    <!--
        data与el的两种写法
        1.el的两种写法
            (1)new Vue时候配置el属性
            (2)先创建vue实例,随后通过$vm.$mount('XXX')指定el值
        2.data的两种写法
            (1).对象式
            (2).函数式
            !!组件必须用函数式,否则会报错
        3.一个重要的原则,Vue管理的函数,一定不要写成箭头函数,一旦写了箭头函数,this就不再是Vue实例了而是window
    -->
    
    <div id="root">
        <p>{{name}}</p>
       
    </div>

    <script>
        Vue.config.productionTip=false//阻止vue在启动时候生成生产提示
        
        //创建vue实例

        
        /***
         * el的两种写法
         var vm=new Vue({
            el:'#root',//第一种写法
            data:{
                name:'你好vue'
            } 
        })
        vm.$mount('#root')//第二种写法**/

        
       var vm= new Vue({
            // el:'#root',
            //data的两种写法
            //第一种写法:对象式
          /*  data:{
                name:'你好vue'
            } 
            */

            //第二种写法:函数式
            data:function(){return {name:'hello vue'}}
        })

        setInterval(()=>{vm.$mount('#root')},3000)






            </script>
</body>
</html>